<!-- <script> {{{ -->
<script setup lang="ts">
import {nextTick} from 'vue'
import {Server} from '@/stores/ajax';
import {RouterLink, RouterView} from 'vue-router'
import MyQuill from '@/components/quillComponent.vue'
import QuillRead from '@/components/quillReadComponent.vue'
import {GetUserState} from '@/stores/userState';
import WorldIndex from '@/components/bbs/world/worldIndex.vue'
import WorldPost from '@/components/bbs/world/worldPost.vue'

let user = GetUserState()

</script>
<!-- }}} -->

<template>
    <div class="fvs">

        <div class="fhs">
            <div :offset="8" class="fvs rhs-affix-area">
                <div>
                    <!-- userinfo block {{{ -->
                    <div class="card-block userinfo-block">
                        <div class="user-avatar fhs" style="">
                            <el-avatar :size="50" :src="Server.fileBaseURL + user.avatar" />
                            <div class="user-name">{{ user.user_name}}</div>
                        </div>
                        <div class="fh score-area" style="">
                            <div class="fv score-area-item" style="">
                                <div class="score-title">
                                    关注
                                </div>
                                <div class="score-num">
                                    001
                                </div>
                            </div>
                            <div class="line1">
                            </div>
                            <div class="fv score-area-item">
                                <div class="score-title">
                                    点赞
                                </div>
                                <div class="score-num">
                                    001
                                </div>
                            </div>
                            <div class="line1">
                            </div>
                            <div class="fv score-area-item">
                                <div class="score-title">
                                    收藏
                                </div>
                                <div class="score-num">
                                    001
                                </div>
                            </div>
                        </div>
                    </div>
                    <!--  }}} -->

                    <!-- <div class="the-block fontsizes3" style="padding: 10px 20px;"> -->
                    <!--     热点 -->
                    <!-- </div> -->
                    <el-backtop class="up-to-top">
                        <div class="up-box">
                            UP
                        </div>
                    </el-backtop>

                </div>
            </div>
            <div style="flex-grow: 1;">
                <RouterView />
            </div>
        </div>

    </div>
</template>

<style scoped lang="scss">
.ql-bubble .ql-editor {
    padding: 0;
}


.rhs-affix-area {
    order: 1;
    flex-basis: 200px;
    min-width: 200px;
}

.userinfo-block {
    padding: 10px 0 20px;

    .user-avatar {
        gap: 10px;
        margin: 0px 30px 6px;
        padding-top: 10px;

        .user-name {
            align-self: center;
            font-size: 20px;

        }

    }

    .score-area {
        line-height: 23px;

        .score-area-item {
            padding: 10px;

            .score-title {
                font-size: 14px;
                color: #999999;
                text-align: center;
            }

            .score-num {
                font-size: 16px;
                font-weight: bold;
                color: #333333;
                /* align-self: center; */

                text-align: center;
            }
        }

        .line1 {
            border-right: #ccc 1px solid;
            height: 35px;
            align-self: center;
        }
    }

}

.up-to-top {
    position: static;
    margin-top: 8px;

    .up-box {
        height: 100%;
        width: 100%;
        background-color: var(--el-bg-color-overlay);
        box-shadow: var(--el-box-shadow-lighter);
        text-align: center;
        line-height: 40px;
        color: #1989fa;
        border-radius: 4px;
    }
}

.post-block {}

.post-main {
    flex-basis: 800px;
    min-width: 600px;
    margin-right: 8px;
    padding: 16px 12px 0;

    .user-avatar {
        margin: 10px 20px;
    }

    .post-textarea {
        justify-content: start;
        flex-grow: 1;
        margin-top: 10px;
        margin-right: 20px;

        .post-textarea-wrapper {
            height: 200px;
        }
    }

    .b-post {
        margin: 10px 0 30px;
        font-size: 16px;
        max-width: 100px;
        letter-spacing: 10px;
    }

    .b-post.b-post {
        text-indent: -10px;
        direction: rtl;
    }

    .post-item {
        margin: 5px 0px;
        padding: 0 20px;
        /* background-color: #def; */
        border-radius: 4px;

        .post-avatar {
            margin: 10px 20px 10px 0;

        }

        .post-rightside {

            .post-username {
                margin: 4px 0 0;
                font-size: 16px;
                font-weight: bold;
            }

            .post-content {
                font-size: 16px;
            }
        }

        .baseline {
            justify-content: start;
            gap: 20px;
            margin: 10px 0;
            font-size: 14px;
            color: #666;
        }
    }
}

.hover__g:hover {
    background-color: #f4f4f4;
}
</style>
<style>
.post-quill {
    height: 100%;
    width: 100%;
}
</style>
